import React,{PureComponent} from 'react';
import {DetailWrapper,Header,Content} from  './style';
import {connect} from 'react-redux';
import {actionCreators} from './store';
import {withRouter} from 'react-router-dom';

class Detail extends PureComponent {
    render(){
        const {title,imgUrl,content}=this.props
        return (
            <DetailWrapper>
                <Header>{title}</Header>
                <Content>
                    <img src={imgUrl} alt=""></img>
                    <p>{content}</p>
                </Content>
            </DetailWrapper>
        )
    }
    componentDidMount(){
        this.props.getDetail(this.props.match.params.id)
    }
}

const mapStateToProps=(state)=>{
    return {
        title:state.get('detail').get('title'),
        imgUrl:state.get('detail').get('imgUrl'),
        content:state.get('detail').get('content'),
    }
}
const mapDispatchToProps=(dispatch)=>{
    return {
        getDetail(id){
            const action=actionCreators.getDataAction(id);
            dispatch(action);
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(withRouter(Detail)) ;